<template>
  <div class="clues-box">
    <div v-if="$route.query.formName || $route.query.name || $route.query.ip" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <CountViewer :all-count-data="allCountData" class="count-viewer" />
    <div class="app-container hk-flex-column mt20">
      <div class="hk-flex-bottom">
        <SearchForm
          :data="searchData"
          :field-list="filterInfo.fieldList"
          :list-type-info="dictList"
          @handleSearch="handleQuery"
          @handleReset="resetQuery" />
        <el-row>
          <el-button :disabled="checkedList.length == 0" size="mini" @click="handleBatchMarking('ids')"
            >批量标记</el-button
          >
        </el-row>
      </div>
      <div class="tab-content hkflex-cloumn">
        <hk-table
          :table-data="tableData"
          :table-columns="tableList"
          :selection="true"
          :show-index="true"
          :total="total"
          :loading="loading"
          :table-height="80"
          :operate="true"
          :select-fn="selectFn"
          :common-fixed="true"
          operate-width="260"
          :layout="'prev, pager, next,sizes'"
          :query-params="queryParams"
          @handleSelectionChange="handleSelectionChange"
          @changePage="getDataList">
          <!-- MAC地址 -->
          <template #mac="scope">
            <span>{{ scope.row.mac?scope.row.mac:'-' }}</span>
          </template>
          <!-- 标记状态 -->
          <template #signStatus="scope">
            <span>{{ setStatus(scope.row.signStatus) }}</span>
          </template>
          <template #determineStatus="scope">
            <span>{{ dictList.determineStatusOptions.find((i) => i.value == scope.row.determineStatus).label }}</span>
          </template>
          <!-- 操作权限 -->
          <template #operate="scope">
            <el-button
              :disabled="scope.row.signStatus || scope.row.determineStatus!=0"
              size="mini"
              type="text"
              @click="handleBatchMarking('id', scope.row.id)"
              >标记</el-button
            >
            <el-button
              :disabled="scope.row.signStatus || scope.row.determineStatus != 0"
              size="mini"
              type="text"
              @click="handleJudge(scope.row)"
              >判定</el-button
            >
            <el-button
              :disabled="scope.row.signStatus || scope.row.determineStatus != 0"
              size="mini"
              type="text"
              @click="handleCheckOrder(scope.row)"
              >发起核实工单</el-button
            >
          </template>
        </hk-table>
      </div>
    </div>
    <judgeDialog ref="judgeDialogRef" :dict-list="dictList" @handleSubmit="getDataList" />
    <checkOrderDialog ref="checkOrderRef" @handleSubmit="getDataList" />
  </div>
</template>

<script>
import CountViewer from './component/CountView.vue'
import SearchForm from '@/components/HkSearchform/index.vue'
import HkTable from '@/components/Hk-Table/index.vue'
import judgeDialog from './component/judgeDialog.vue'
import checkOrderDialog from '@/views/assets/unknownAssets/component/checkOrderDialog'

import { count, pageList, sign } from '@/api/assets/unknownAssets'
import { listAll, entityTree } from '@/api/assets/host.js'
export default {
  name: 'CaseClues',
  components: {
    HkTable,
    CountViewer,
    SearchForm,
    judgeDialog,
    checkOrderDialog,
  },
  data() {
    return {
      allCountData: {},
      checkedList: [],
      searchData: {},
      queryParams: {
        size: 10,
        current: 1,
      },
      disableDelete: true,
      dictList: {
        // 部门
        orgList: [],
        statusList: [
          { label: '已标记', value: true },
          { label: '未标记', value: false },
        ],
        determineStatusOptions: [
          { label: '未判定', value: 0 },
          { label: '已判定', value: 1 },
          { label: '核实中', value: 2 },
          { label: '已核实', value: 3 },
        ],
        // 设备类型
        typeList: [
          { label: '终端设备', value: 'host' },
          { label: '服务器设备', value: 'server' },
          { label: '网络设备', value: 'net' },
        ],
        // 设备类型
        equipmentTypeList: [],
        // 是否
        equipmentLocalizedList: [],

        // 设备类别
        equipmentCategoryList: [],

        // 联网类型
        equipmentHostNetTypeList: [],

        // 设备状态
        equipmentStatusList: [],

        equipmentUseStatusList: [],

        // 涉密等级
        equipmentSecLevelList: [],

        // 重要程度
        assetsSecDominList: [],

        // 所在安全域
        equipmentCriticalityLevelList: [],
        //  new联网类型
        newEquipmentHostNetTypeList: [],
        //  new涉密等级
        newEquipmentSecLevelList: [],
      },
      tableData: [],
      total: 0,
      loading: false,
      tableList: [
        { label: 'IP地址', param: 'ip' },
        { label: 'MAC地址', param: 'mac',type:'slot' },
        { label: '设备类型', param: 'typeValue' },
        { label: '是否标记', param: 'signStatus', type: 'slot' },
        { label: '状态', param: 'determineStatus', type: 'slot' },
        { label: '首次发现时间', param: 'firstDiscoveryTime' },
        { label: '末次发现时间', param: 'lastDiscoveryTime' },
      ],
      filterInfo: {
        fieldList: [
          { label: '关键字', type: 'input', field: 'keyword', placeholder: '请输入IP/MAC', maxlength: 20 },
          { label: '是否标记', type: 'select', field: 'signStatus', list: 'statusList' },
        ],
      },
    }
  },
  watch: {},
  created() {
    this.getDict()
    this.getDataList()
    this.loadCountData()
    this.getTreeselect()
  },
  mounted() {
    const childRef = this.$refs.judgeDialogRef
    this.$watch(
      () => childRef.formData.equipmentType,
      (newVal, oldVal) => {
        if (newVal == 1) {
          this.dictList.newEquipmentHostNetTypeList = this.dictList.equipmentHostNetTypeList.filter(
            (item) => item.value !== '3'
          )
          this.dictList.newEquipmentSecLevelList = this.dictList.equipmentSecLevelList.filter(
            (item) => item.value !== '1'
          )
        } else {
          this.dictList.newEquipmentHostNetTypeList = this.dictList.equipmentHostNetTypeList
          this.dictList.newEquipmentSecLevelList = this.dictList.equipmentSecLevelList
        }
      }
    )
  },
  methods: {
    // 是否标记
    setStatus(val) {
      const findData = this.dictList.statusList.find((i) => i.value == val)
      return findData.label
    },
    // 批量标记
    handleBatchMarking(type, id) {
       let ids = null
      if (type == 'id') {
        ids = id
      } else {
        ids = this.checkedList.join(',')
      }
       this.$modal
        .confirm('是否确认标记此数据项？')
        .then(function() {
          return sign({ ids: ids })
        })
        .then((res) => {
           this.$message.success('标记成功')
        this.afterSubmit()
        })
        .catch(() => {})
    },
    //  判断复选框是否可编辑
    selectFn(params) {
      return !params.signStatus && params.determineStatus==0
    },
    //  判定
    handleJudge(row) {
      this.$refs.judgeDialogRef.show(row)
    },

    // 点击发起核实工单
    handleCheckOrder(row) {
      this.$refs.checkOrderRef.show(row)
    },
    // 弹窗提交后
    afterSubmit() {
      this.loadCountData()
      this.getDataList()
    },
    //  查询
    handleQuery() {
      this.queryParams.current = 1
      this.getDataList()
    },
    //  重置
    resetQuery() {
      this.queryParams.current = 1
      this.queryParams.size = 10
      this.getDataList()
    },

    handleSelectionChange(obj) {
      this.checkedList = obj.map((i) => i.id)
    },
    getDataList() {
      this.loading = true
      pageList(Object.assign({}, this.queryParams, this.searchData)).then((res) => {
        this.loading = false
        this.tableData = res.list
        this.total = res.total
      })
    },

    loadCountData() {
      count().then((res) => {
        this.allCountData = res
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect(id) {
      entityTree(id).then((res) => {
        this.deptOptions = res
        this.dictList.orgList = res
        this.defaultExpandedKeys = [res[0].id]
      })
    },
    // 获取所有字典
    getDict() {
      return new Promise((resolve, reject) => {
        listAll(
          'equipmentNetType,equipmentSerType,equipmentType,equipmentLocalized,equipmentCategory,equipmentHostNetType,equipmentSecLevelAdjust,' +
            'equipmentStatus,equipmentUseStatus,equipmentSecLevel,assetsSecDomainAuto,equipmentBuiltincdDrive,' +
            'equipmentCriticalityLevel,osType,equipmentBuiltincdDrivestate,equipmentPurpose'
        ).then((res) => {
          for (const key in res) {
            this.dictList[key + 'List'] = res[key].map((item) => {
              return {
                value: item.itemVale,
                label: item.itemLabel,
              }
            })
          }
          this.dictList.newEquipmentHostNetTypeList = this.dictList.equipmentHostNetTypeList
          this.dictList.newEquipmentSecLevelList = this.dictList.equipmentSecLevelList
          resolve(this.dictList)
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
#app.dark-theme{
  .clues-box{
    background:transparent !important;
  }
  .total-title{color:#fff;}
  .tab-list{
    background:rgba(59,139,255,.1) !important;
    color:#fff;
  }
  .font-c-black{
    color:#4b6eef !important;
  }
}
::v-deep .content {
  padding-bottom: 0 !important;
}
.targetTable {
  height: 100%;
}
.hkflex-cloumn {
  flex: 1;
  overflow: hidden;
}
.hk-flex-bottom {
  justify-content: space-between;
}
.clues-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #eef0f5;

  .count-viewer {
    height: 190px;
  }
}
</style>
